<template>
    <div class="container">
        <!-- 位置 -->
        <div class="position-x mt20 flex-align">
            <span>您的位置：首页</span>
            <span>></span>
            <span>游戏</span>
        </div>
        <!--  -->
        <div class="xarticle mt20">
            <!-- xarticle-l -->
            <div class="xarticle-l">
                <h2>《伊洛纳》怎么带走国王的床</h2>
                <div class="xarticle-intro flex-align fz14">
                    <img src="~/assets/images/time.png" alt="">
                    <span class="ml10">2019-09-09</span>
                    <span>编辑：追风少年</span>
                </div>
                <div class="xarticle-body">
                    富文本信息
                </div>
                <!-- xarticle-xx -->
                <div class="xarticle-xx flex-align box10 pt16 pb14 pl20 pr20">
                    <div class="xarticle-xx-img">
                        <img src="~/assets/images/img2.png" alt="">
                    </div>
                    <div class="xarticle-xx-info flex1 ml20 ovn">
                        <h3>伊洛纳</h3>
                        <div class="ovn flex flex-wrap">
                            <p>类型：策略攻击</p>
                            <p>语言：中文</p>
                            <p>版本：2.4</p>
                            <p>大小：678MB</p>
                        </div>
                    </div>
                    <div class="xarticle-xx-down flex-center-align fz24 cfff">点击下载</div>
                </div>
                <!--  -->
                <div class="pt16 bgf mt20 pb20">
                    <div class="ydetails-t flex-align bgf">
                        <h4 class="ydetails-ta fz22 bold">相关攻略</h4>
                        <div class="flex1"></div>
                        <nuxt-link to="" class="box-more">更多</nuxt-link>
                    </div>
                    <ul class="xarticle-ua bgf8 ovn">
                        <li class="flex-align" v-for="i in 5" :key="i">
                            <span></span>
                            <nuxt-link to="">久啊红烧鸡块带回家卡仕达户籍卡撒</nuxt-link>
                        </li>
                    </ul>
                </div>
                <!--  -->
                <div class="pt16 bgf mt20 pb20">
                    <div class="ydetails-t flex-align bgf">
                        <h4 class="ydetails-ta fz22 bold">相关游戏</h4>
                        <div class="flex1"></div>
                        <nuxt-link to="" class="box-more">更多</nuxt-link>
                    </div>
                    <ul class="xarticle-ub flex flex-wrap ovn pl20">
                        <li class="flex-align" v-for="(item, index) in 15" :key="index">
                            <div class="imgr100">
                                <img class="img100" src="~/assets/images/img2.png" alt="">
                            </div>
                            <div class="flex1 ml10 ovn">
                                <h3 class="fz16">第七宇宙</h3>
                                <p class="fz12 mt4">赛程竞速|V 1.2版本</p>
                                <p class="fz12 mt4">中文|700MB</p>
                            </div>
                        </li>
                    </ul>
                </div>
                <!--  -->
                <!--  -->
            </div>

            <!-- xarticle-r -->
            <div class=" xarticle-r">
                <!--  -->
                <div class="xarticle-rboxa pt16 bgf">
                    <div class="ydetails-t flex-align bgf">
                        <h4 class="ydetails-ta fz22 bold">热门文章</h4>
                        <div class="flex1"></div>
                        <nuxt-link to="" class="box-more">更多</nuxt-link>
                    </div>
                    <ul class="xarticle-rua bgf8 pb10">
                        <li class="flex-align" v-for="(item, index) in 5" :key="index">
                            <span></span>
                            <nuxt-link to="">《QQ》情侣跳一跳怎么进</nuxt-link>
                        </li>
                    </ul>
                </div>
                <!-- xarticle-rboxb -->
                <div class="xarticle-rboxb pt16 bgf mt20">
                    <div class="ydetails-t flex-align bgf">
                        <h4 class="ydetails-ta fz22 bold">近期大作</h4>
                        <div class="flex1"></div>
                        <nuxt-link to="" class="box-more">更多</nuxt-link>
                    </div>
                    <ul class="xarticle-rub pb10">
                        <li class="flex-align" v-for="(item, index) in 5" :key="index">
                            <div class="imgr100">
                                <img class="img100" src="~/assets/images/img2.png" alt="">
                            </div>
                            <div class="flex1 ml12 ovn">
                                <h3 class="fz16">第七宇宙</h3>
                                <p class="fz12 mt4">赛程竞速|V 1.2版本</p>
                                <p class="fz12 mt4">中文|700MB</p>
                            </div>
                            <div class="xarticle-rub-down flex-center-align fz16 cfff">下载</div>
                        </li>
                    </ul>
                </div>
                <!-- xarticle-rboxc -->
                <div class="xarticle-rboxc pt16 bgf mt20">
                    <div class="ydetails-t flex-align bgf">
                        <h4 class="ydetails-ta fz22 bold">下载排行</h4>
                        <div class="flex1"></div>
                        <nuxt-link to="" class="box-more">更多</nuxt-link>
                    </div>
                    <div class="xarticle-rboxc-t mt10 flex-center-align">
                        <span class="flex-center-align on">游戏排行</span>
                        <span class="flex-center-align">软件排行</span>
                    </div>
                    <ul class="xarticle-rub xarticle-ruc pb10 mt10">
                        <li class="flex-align" v-for="(item, index) in 5" :key="index">
                            <div class="xarticle-rub-num flex-center-align" :class="index < 3 ? 'bgred' : ''">
                                <span>{{ index + 1 }}</span>
                            </div>
                            <div class="imgr100">
                                <img class="img100" src="~/assets/images/img2.png" alt="">
                            </div>
                            <div class="flex1 ml12 ovn">
                                <h3 class="fz16">第七宇宙</h3>
                                <p class="fz12 mt4">赛程竞速|V 1.2版本</p>
                                <p class="fz12 mt4">中文|700MB</p>
                            </div>
                            <div class="xarticle-rub-dm">
                                <img class="xarticle-rub-dm-a" src="~/assets/images/down0.png" alt="">
                                <img class="xarticle-rub-dm-b" src="~/assets/images/down1.png" alt="">
                            </div>
                        </li>
                    </ul>
                </div>
                <!-- xarticle-rboxd -->
                <div class="xarticle-rboxd pt16 bgf mt20">
                    <div class="ydetails-t flex-align bgf">
                        <h4 class="ydetails-ta fz22 bold">H5排行</h4>
                        <div class="flex1"></div>
                        <nuxt-link to="" class="box-more">更多</nuxt-link>
                    </div>
                    <ul class="xarticle-rub xarticle-ruc pb10 mt10">
                        <li class="flex-align" v-for="(item, index) in 5" :key="index">
                            <div class="xarticle-rub-num flex-center-align" :class="index < 3 ? 'bgred' : ''">
                                <span>{{ index + 1 }}</span>
                            </div>
                            <div class="imgr100">
                                <img class="img100" src="~/assets/images/img2.png" alt="">
                            </div>
                            <div class="flex1 ml12 ovn">
                                <h3 class="fz16">第七宇宙</h3>
                                <p class="fz12 mt4">赛程竞速|V 1.2版本</p>
                                <p class="fz12 mt4">中文|700MB</p>
                            </div>
                            <div class="xarticle-rub-dm">
                                <img class="xarticle-rub-dm-a" src="~/assets/images/down0.png" alt="">
                                <img class="xarticle-rub-dm-b" src="~/assets/images/down1.png" alt="">
                            </div>
                        </li>
                    </ul>
                </div>
                <!--  -->
            </div>
            <!--  -->
        </div>
        <!--  -->
        <div class="box10 pt16 pb16 flex-center-align mt20">
            <el-pagination background layout="prev, pager, next" v-model:current-page="params.page"
                :page-size="params.size" :total="total" @current-change="handleCurrentChange" />
        </div>
        <!--  -->
    </div>
</template>
<script setup>
let pageInfo = useWebsiteStore().getgetMenuInfo('文章');// 调用 store 实例的方法
useSeoMeta({
    title: () => pageInfo.page_title,
    keywords: () => pageInfo.page_keywords,
    description: () => pageInfo.page_description,
})
let navList = ref([
    { id: 0, name: '全部' },
    { id: 1, name: '游戏攻略' },
    { id: 2, name: '软件教程' },
    { id: 3, name: '活动杂谈' },
])
let params = reactive({
    id: '',
    page: 1,
    limit: 10,
})
let total = ref(0);
let dataList = ref([]);

//切换页码时变化
const handleCurrentChange = (val) => {
    params.page = val;
    getList();
}
</script>
<style lang="scss" scoped>
.position-x {
    position: relative;
    padding: 0 22px;
    height: 44px;
    background: #FFFFFF;
    font-size: 14px;
    color: #626262;
}

/*xarticle */
.xarticle {
    position: relative;
    overflow: hidden;

    .ydetails-t {
        position: relative;
        padding: 0 20px;
        height: 51px;
        border-left: 4px solid #FF8E2B;
        border-bottom: 2px solid #BBBBBB;
    }

    .xarticle-l {
        float: left;
        width: 740px;

        h2 {
            padding: 20px 0;
            text-align: center;
            font-weight: bold;
            font-size: 32px;
            color: #000000;
            line-height: 40px;
        }

        .xarticle-intro {
            height: 40px;
            line-height: 40px;
            border-bottom: 1px solid #BBBBBB;

            span {
                margin-right: 40px;
            }
        }

        .xarticle-body {
            padding: 20px;
        }

        .xarticle-xx {
            .xarticle-xx-img {
                width: 110px;
                height: 110px;
                border-radius: 10px;
                overflow: hidden;
            }

            .xarticle-xx-info {
                h3 {
                    font-weight: bold;
                    font-size: 24px;
                }

                p {
                    margin-top: 4px;
                    width: 200px;
                    font-size: 16px;
                }
            }

            .xarticle-xx-down {
                width: 136px;
                height: 40px;
                background: #FF8E2B;
                border-radius: 10px;
            }
        }

        /**
         * xarticle-ua
         */
        .xarticle-ua {
            li {
                float: left;
                padding: 0 20px;
                width: 50%;
                height: 42px;
                line-height: 42px;
                border-bottom: 1px solid #BBBBBB;

                span {
                    display: inline-block;
                    margin: 0 10px;
                    width: 5px;
                    height: 5px;
                    background-color: #333333;
                    border-radius: 50%;
                }
            }
        }

        /*  xarticle-ub */
        .xarticle-ub {
            li {
                position: relative;
                padding: 10px 0;
                // margin-right: 10px;
                width: 240px;
                overflow: hidden;

                &:nth-child(3n) {
                    margin-right: 0;
                }

                p {
                    white-space: nowrap;
                }
            }
        }
    }

    .xarticle-r {
        float: right;
        width: 440px;

        .xarticle-rua {
            li {
                padding-left: 20px;
                height: 42px;
                line-height: 42px;
                border-bottom: 1px solid #BBBBBB;
                font-size: 16px;

                &:last-child {
                    border-bottom: none;

                }

                span {
                    display: inline-block;
                    margin: 0 10px;
                    width: 5px;
                    height: 5px;
                    background-color: #333333;
                    border-radius: 50%;
                }
            }
        }

        .xarticle-rub {
            padding: 0 20px;

            li {
                position: relative;
                height: 120px;
                border-bottom: 1px solid #BBBBBB;

                .xarticle-rub-num {
                    margin-right: 18px;
                    width: 20px;
                    height: 20px;
                    border-radius: 2px;
                    font-size: 20px;
                    border: 1px solid #BBBBBB;

                    &.bgred {
                        border: 1px solid #FF8E2B;
                        color: #FF8E2B;
                    }
                }

                .xarticle-rub-down {
                    width: 52px;
                    height: 26px;
                    background: #FF8E2B;
                    border-radius: 2px 2px 2px 2px;
                }
            }
        }

        .xarticle-rboxc-t {
            span {
                width: 136px;
                height: 29px;
                border-radius: 2px;
                border: 1px solid #D9D9D9;
                font-size: 18px;
                color: #333333;
                cursor: pointer;

                &.on {
                    background-color: #FF8E2B;
                    color: #ffffff;
                    border: 1px solid #FF8E2B;

                }

                &:last-child {
                    margin-left: 60px;
                }
            }
        }

        .xarticle-ruc {
            li {
                border: none;

                .xarticle-rub-dm {
                    margin-right: 16px;
                    cursor: pointer;

                    &:hover {
                        .xarticle-rub-dm-a {
                            display: none;

                        }

                        .xarticle-rub-dm-b {
                            display: block;
                        }
                    }

                    .xarticle-rub-dm-a {}

                    .xarticle-rub-dm-b {
                        display: none;
                    }
                }
            }
        }
    }
}
</style>